<template>
<div class="bigContain">
  <div class="contain">
    <div class="title">
     找回密码
    </div>
    <div class="hintbarr">
      <div class="hinton" id="Sms" @click="changwithSms">使用短信找回</div>
      <div class="hintoff" id="Mibao" @click="changwithMibao">通过密保找回</div>
    </div>
    <div class="bfrom1">
      <div class="bfrom" v-if="SmsFandKey">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号" prop="account">
            <el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="telnumber">
            <el-input type="tel" v-model.number="ruleForm.telnumber"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verfCode">
            <div style="display: flex;flex-direction: row;align-content: space-between">
              <el-input v-model.number="ruleForm.verfCode"></el-input>
              <button class="el-button" ref="yzbutton" style="margin-left: 10px" @click="sendCode">获取验证码{{num}}</button>
            </div>
          </el-form-item>
        </el-form>
        <div class="my-4 flex items-center text-sm" style="display: flex; justify-content: center;margin-bottom: 10px">
          <el-radio-group v-model="fandwho" >
            <el-radio :label="0">管理员</el-radio>
            <el-radio :label="1">答者</el-radio>
            <el-radio :label="2">用户</el-radio>
            <el-radio :label="3">租户</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="bfrom" v-else>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 55%">
          <el-form-item label="账号" prop="account">
            <el-input type="text" v-model="ruleForm.account" autocomplete="off" @change="getInfomation"></el-input>
          </el-form-item>
          <el-form-item label="密保问题为" prop="question">
            <el-input type="text" v-model="ruleForm.fquestion" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密保回答" prop="answer">
            <el-input type="text" v-model="ruleForm.fanswer" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="my-4 flex items-center text-sm" style="display: flex; justify-content: center;margin-bottom: 10px">
          <el-radio-group v-model="fandwho" @change="getInfomation">
            <el-radio :label="1">答者</el-radio>
            <el-radio :label="2">用户</el-radio>
            <el-radio :label="3">租户</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="buttonbar">
        <button class="bbutton" @click="confirm">验证</button>
        <button class="bbutton" @click="resetForm('ruleForm')">清空</button>
        <button class="bbutton" @click="back">返回</button>
      </div>
    </div>

  </div>
  <div>
    <el-dialog title="设置新密码" :visible.sync="dialogFormVisible" append-to-body width="40%">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 55%">
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width: 175%"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 175%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetKey">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {findPwdSmsUser,findPwdSmsAdmin,findPwdSmsAnswerer,findPwdSmsTenement,
resetPwdAdmin,resetPwdAnswerer,resetPwdTenement,resetPwdUser,
  checkSecAnswerer,checkSecTenement,checkSecUser,
  showAnswererSec,showTenementSec,showUserSec
} from "../../api/FandPassword";

export default {
  name: "fandpassword",
  data() {
    var checkaccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账户！'));
      }

    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var validatetelnumber = (rule,value,callback) =>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }
    };
    var validateAnswer = (rule,value,callback) =>{
      if(value === ''){
        callback(new Error('请输入密保答案'))
      }
    };

    return {
      //重置密码的框
      dialogFormVisible:false,
      //是否是通过信息找回密码,true为信息，false为密保找回
      SmsFandKey:true,
      //代表角色的变量，0为admin 1为答者 2为用户 3为租户
      fandwho: 1,
      num : '',
      getVerification:'',
      getquestion:'',
      getanswer:'',
      ruleForm: {
        account:'',
        pass: '',
        checkPass: '',
        telnumber: '',
        verfCode:'',
        fquestion:'',
        fanswer: ''
      },
      rules: {
        account: [
          {validator: checkaccount,trigger: 'blur'}
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        telnumber: [
          {validator: validatetelnumber, trigger:'blur'}
        ],
        fanswer:[
          {validator:validateAnswer, trigger:'blur'}
        ]
      }
    };
  },
  methods: {
    back(){
      this.$router.push({path:'/login'})
    },
    resetForm(){
      this.ruleForm.telnumber = ''
      this.ruleForm.account = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
      this.ruleForm.verfCode = ''
      this.ruleForm.fanswer = ''
      this.ruleForm.fquestion = ''
    },
    changwithSms(){
      this.fandwho=1
      this.SmsFandKey = true
      this.ruleForm.telnumber = ''
      this.ruleForm.account = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
      this.ruleForm.verfCode = ''
      this.ruleForm.fanswer = ''
      this.ruleForm.fquestion = ''

      document.getElementById("Sms").className="hinton"
      document.getElementById("Mibao").className="hintoff"
    },
    changwithMibao(){
      this.fandwho=1
      this.SmsFandKey = false
      this.ruleForm.telnumber = ''
      this.ruleForm.account = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
      this.ruleForm.verfCode = ''
      this.ruleForm.fanswer = ''
      this.ruleForm.fquestion = ''

      document.getElementById("Sms").className="hintoff"
      document.getElementById("Mibao").className="hinton"
    },
    async sendCode() {
      console.log("点击验证码按钮一次")
      let tel = this.ruleForm.telnumber;
      if (!tel) {
        this.$message.warning("请输入手机号码")
        return
      }
      if (!/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(tel)) {
        this.$message.warning("请输入正确格式的手机号")
        return
      }
      this.$refs.yzbutton.setAttribute('disabled', true)
      this.num = 10
      let num = setInterval(() => {
        this.num -= 1
        if (this.num < 1) {
          clearInterval(num)
            this.$refs.yzbutton.removeAttribute('disabled')
          this.num = ""
        }
      }, 1000)
      //发送得到验证码请求

      if(this.fandwho==0){
        findPwdSmsAdmin(tel).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.getVerification = response.data.data
          }else {
            this.$message.warning(response.data.message)
          }
        })
      }
      if(this.fandwho==1){
        findPwdSmsAnswerer(tel).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.getVerification = response.data.data
          }else {
            this.$message.warning(response.data.message)
          }
        })

      }
      if(this.fandwho==2){
        findPwdSmsUser(tel).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.getVerification = response.data.data
          }else {
            this.$message.warning(response.data.message)
          }
        })
      }
      if(this.fandwho==3){
        findPwdSmsTenement(tel).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.getVerification = response.data.data
          }else {
            this.$message.warning(response.data.message)
          }
        })
      }
    },
    getInfomation(){
      if(this.ruleForm.account==''){
        this.$message.warning("请输入账户名")
        return
      }
      if(this.fandwho==1){
        showAnswererSec(this.ruleForm.account).then((response)=>{
          console.log("返回用户所有信息")
          console.log(response.data)
          const context = response.data.data
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.ruleForm.fquestion = context.securityQuestionContext
            this.getanswer = context.securityQuestionAnswer
          }else {
            this.$message.error(response.data.message)
          }
        })
      }
      if(this.fandwho==2){
        showUserSec(this.ruleForm.account).then((response)=>{
          console.log("返回用户所有信息")
          console.log(response.data)
          const context = response.data.data
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.ruleForm.fquestion = context.securityQuestionContext
            this.getanswer = context.securityQuestionAnswer
          }else {
            this.$message.error(response.data.message)
          }
        })

      }
      if(this.fandwho==3){
        showTenementSec(this.ruleForm.account).then((response)=>{
          console.log("返回用户所有信息")
          console.log(response.data)
          const context = response.data.data
          if(response.data.code==200){
            this.$message.success(response.data.message)
            this.ruleForm.fquestion = context.securityQuestionContext
            this.getanswer = context.securityQuestionAnswer
          }else {
            this.$message.error(response.data.message)
          }
        })

      }
    },
    //确定短信验证码是否正确
    confirm(){
      const info = this.ruleForm
      if(info.account==""){
        this.$message.warning("账户不能为空！！")
        return
      }
      if(this.SmsFandKey){
        if(info.verfCode==this.getVerification){
          //打开重置密码的框
          this.dialogFormVisible = true

        }else{
          this.$message.warning("验证码错误！")
        }
      }else {
        if(this.getanswer==info.fanswer){
          if(this.fandwho==1){
            checkSecAnswerer(info.account,info.fanswer).then((response)=>{
              console.log(response.data)
              if(response.data.code==200){
                this.$message.success(response.data.message)
                this.dialogFormVisible = true
              }
              else {
                this.$message.warning(response.data.message)
              }
            })

          }
          if(this.fandwho==2){
            checkSecUser(info.account,info.fanswer).then((response)=>{
              console.log(response.data)
              if(response.data.code==200){
                this.$message.success(response.data.message)
                this.dialogFormVisible = true
              }
              else {
                this.$message.warning(response.data.message)
              }
            })

          }
          if(this.fandwho==3){
            checkSecTenement(info.account,info.fanswer).then((response)=>{
              console.log(response.data)
              if(response.data.code==200){
                this.$message.success(response.data.message)
                this.dialogFormVisible = true
              }
              else {
                this.$message.warning(response.data.message)
              }
            })
          }
        }else {
          this.$message.error("密保问题回答错误！")
        }

      }
    },
    resetKey(){
      const info = this.ruleForm
      if(this.ruleForm.pass!==this.ruleForm.checkPass){
        this.$message.warning("两次输入的密码不相同！")
        this.ruleForm.pass = ""
        this.ruleForm.checkPass = ""
        return
      }
      if(this.ruleForm.pass==""|| this.ruleForm.checkPass==""){
        this.$message.warning("请确保两次密码都填写好！")
        return
      }

      if(this.fandwho==0){
        resetPwdAdmin(info.account,info.pass).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success("重置管理员密码成功")
            this.dialogFormVisible = false
            this.$router.push({path:'/login'})
          }
          else {
            this.$message.warning(response.data.message)
          }
        })

      }
      if(this.fandwho==1){
        resetPwdAnswerer(info.account,info.pass).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success("重置答者密码成功")
            this.dialogFormVisible = false
            this.$router.push({path:'/login'})
          }
          else {
            this.$message.warning(response.data.message)
          }
        })

      }
      if(this.fandwho==2){
        resetPwdUser(info.account,info.pass).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success("重置用户密码成功")
            this.dialogFormVisible = false
            this.$router.push({path:'/login'})
          }
          else {
            this.$message.warning(response.data.message)
          }
        })

      }
      if(this.fandwho==3){
        resetPwdTenement(info.account,info.pass).then((response)=>{
          console.log(response.data)
          if(response.data.code==200){
            this.$message.success("重置租户密码成功")
            this.dialogFormVisible = false
            this.$router.push({path:'/login'})
          }
          else {
            this.$message.warning(response.data.message)
          }
        })

      }
    }
  }
}
</script>

<style scoped>

.bfrom1{
  width: 100%;
  height: 50%;

}
.bfrom{
  width: 100%;
  height: 100%;
  margin-top: 5px;
  padding: 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

}
.buttonbar{
  display: flex;
  flex-direction: row;
  align-content: space-around;
  justify-content: space-evenly;

}
.hintbarr {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  padding: 5px;
  margin: 10px;
}

.hintbarr .hintoff {
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}
.hintbarr .hinton {
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
  color: #7EA2C1 ;
  text-decoration: underline;
}

.bbutton {
  width: 20%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: rgb(81, 133, 206);
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.bbutton:hover{
  box-shadow: 0px 3px 3px 0px rgb(36, 59, 97);
}
.title{
  margin-top: 5%;
  font-size: 1.5em;
  font-weight: bold;
  color: rgb(81,133,206);
  display: flex;
  justify-content: center;
}
.bigContain{
  background-image: url("../../assets/background.jpg");
  background-size: 100% 100%;
  margin: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
.contain{
  width: 50%;
  height: 70%;
  position: relative;
  top: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}

</style>
